<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>select</title>
</head>

<body>
   <select multiple size="7" name="" id="unSel"></select>
   <select multiple size="7" name="" id="sel"></select> <br>
   <button id="btnRight">选中项右移</button>
   <button id="btnLeft">选中项左移</button>
   <button id="btnAllRight">全部右移</button>
   <button id="btnALLleft">全部左移</button>
   <script>
      var unSelArr = ["中国", "美国", "俄罗斯", "英国", "法国"];
      var selArr = [];
      var unSel = document.getElementById("unSel");
      var sel = document.getElementById("sel");
      optioninit(unSel, unSelArr);


      function optioninit(elem, array) {
         var optionString = array.sort().map(elem => "<option>" + elem + "</option>").join("")
         // console.log(optionString);
         elem.innerHTML = optionString;
      }
      //选中项右移
      var btnRight = document.getElementById("btnRight");
      btnRight.onclick = function () {
         for (let i = unSelArr.length - 1; i >= 0; i--) {
            if (unSel.options[i].selected) {
               console.log(unSelArr[i]);
               var selectOption = unSelArr.splice(i, 1);
               console.log(selectOption);

               selArr = [].concat(selArr, selectOption)
            }
         }

         optioninit(unSel, unSelArr);
         optioninit(sel, selArr);
      }
      //选中项左移
      var btnLeft = document.getElementById("btnLeft");
      btnLeft.onclick = function () {
         for (let i = selArr.length - 1; i >= 0; i--) {
            if (sel.options[i].selected) {
               console.log(selArr[i]);
               var selectOption = selArr.splice(i, 1);

               unSelArr = [].concat(unSelArr, selectOption)
            }
         }
         optioninit(unSel, unSelArr);
         optioninit(sel, selArr);
      }
      //全部右移
      var btnAllRight = document.getElementById("btnAllRight");
      btnAllRight.onclick = function () {
         selArr = [].concat(unSelArr, selArr).sort();
         console.log(selArr);
         unSelArr = [];
         optioninit(unSel, unSelArr);
         optioninit(sel, selArr);
      }
      //全部左移
      var btnALLleft = document.getElementById("btnALLleft");
      btnALLleft.onclick = function () {
         unSelArr = [].concat(unSelArr, selArr).sort();
         console.log(selArr);
         selArr = [];
         optioninit(unSel, unSelArr);
         optioninit(sel, selArr);
      }
   </script>
</body>

</html>